<template>
    <Banner :tabList="tabList" :bannerImg="bannerImg" :mainTitle="mainTitle" />
    <NuxtPage class="commonPageStyle" :tabList="tabList" />
</template>

<script setup>
import bannerImg from "/assets/image/service/banner.jpg";

const tabList = reactive([
    {
        title: () => t("common.text13"),
        path: "/service/fund",
        key: "fund",
    },
    {
        title: () => t("common.text14"),
        path: "/service/externalAsset",
        key: "externalAsset",
    },
    {
        title: () => t("common.text15"),
        path: "/service/familyTrust",
        key: "familyTrust",
    },
    {
        title: () => t("common.text16"),
        path: "/service/investConsult",
        key: "investConsult",
    },
]);
const { t } = useI18n();
const mainTitle = computed(() => t("common.text12"));
</script>

<style lang="scss">
.commonPageStyle {
    .service_page-content {
        margin-top: 60px;
        margin-bottom: 160px;
        display: flex;
        justify-content: space-between;
        position: relative;
        .content_left {
            width: 56%;
        }
        .content_right {
            width: 656px;
            height: 100%;
            padding: 60px 50px 60px 90px;
            position: absolute;
            left: calc(56% - 60px);
            top: 60px;
            font-weight: 300;
            background: #fff;
            z-index: 4;
            h3 {
                color: #999;
                text-transform: uppercase;
                letter-spacing: 3px; /* px-to-viewport-ignore */
                font-size: 24px; /* px-to-viewport-ignore */
                line-height: 30px; /* px-to-viewport-ignore */
            }
            h4 {
                color: #0a5fd0;
                font-size: 24px; /* px-to-viewport-ignore */
                margin-top: 8px; /* px-to-viewport-ignore */
                letter-spacing: 3px; /* px-to-viewport-ignore */
            }
            p {
                color: #666;
                font-size: 14px; /* px-to-viewport-ignore */
                line-height: 30px; /* px-to-viewport-ignore */
                margin-top: 20px; /* px-to-viewport-ignore */
                text-align: justify;
                font-weight: lighter;
            }
            .yellow_block {
                width: 60px;
                height: 60px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: #ffe794;
            }
            .yellow_line {
                width: 2px;
                height: 140px;
                position: absolute;
                left: 80px;
                bottom: -35px;
                background: #ffda59;
            }
        }
        .content_left {
            position: relative;
            img {
                width: 100%;
            }
            i {
                display: block;
                width: 100%;
                height: 60px;
                position: absolute;
                left: 0;
                bottom: -60px;
                z-index: 3;
                background: #0a5fd0;
            }
        }
    }
}
</style>
